<template>
	<!--头部日期切换-->
	<view class="date_switching">
		<view>{{ date }} {{ dateType == 'month' ? '月' :'年' }}</view>
		<view style="display: flex;">
			<image @click="subtractDate" src="../../static/icon/data_left_jt.png" style="width:60rpx; height:60rpx ;" />
			<view style="width: 50rpx;"></view>
			<image :class="[{forbidden: isForbiddenBtn()}]" @click="addDate" src="../../static/icon/data_right_jt.png" style="width:60rpx; height:60rpx ;" />
		</view>
	</view>
</template>

<script>
	export default {
		props: {
	      dateType:{
			 type: String,
			 default: "month"
		  },
		},
		name: "switching",
		data() {
			return {
			   date: 0,
			};
		},
		created() {
			var dateCurry = new Date();
		   if(this.dateType == 'month'){
			    this.date =  dateCurry.getMonth() +1;
		   }else{
			   this.date = dateCurry.getFullYear();
		   }
		},
		
		methods:{
			 
			//是否禁用加日期按钮
			isForbiddenBtn(){
			   if(this.date == new Date().getMonth() +1)return true;
			   if(this.date == new Date().getFullYear())return true;
			},
			
			//加月份 
			addDate(){
				
				//限制月的++
				if(this.dateType == 'month' && this.date == new Date().getMonth() + 1){
				  return;
				}
				
				//限制年的++
				if(this.dateType == 'year' && this.date == new Date().getFullYear()){
				  return;
				}
				this.date ++;	
			    //调用父组件方法
				this.$emit('switchingTime',this.date)
			},
			
			//减月份
			subtractDate(){
				if(this.dateType == 'month' && this.date == 1){
				  return;
				}
				this.date --;
				this.$emit('switchingTime',this.date)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.date_switching {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 27px;
		padding-left: 50rpx;
		padding-right: 30px;
		margin-top: 50rpx;
		
		.forbidden{
			opacity: 0.2 !important;
		}
	}
	
	
</style>